<template>
    <section>
        <h2>正在进行<span>{{ sum }}</span></h2>
        <ol>
            <li v-show="running ? !item.flag : item.flag" v-for="item, index in arr">
                <input @click="checked(index)" :checked="item.flag" type="checkbox" />
                <input @keydown.enter="$event.target.blur(index, $event)" @blur="setfn(index, $event)" :value="item.title"
                    ref="input" v-if="!item.flag" style="width:80%; margin-left:30px; display: none;" />
                <p @dblclick="set($event)">{{ item.title }}</p>
                <a href="javascript:;" @click="deletefn(index)">-</a>
            </li>
        </ol>
    </section>
</template>
<script>
import { computed, ref } from 'vue';
export default {
    props: {
        arr: {
            type: Array,
        },
        running: {
            type: Boolean,
        }
    },
    setup(props, context) {
        let input = ref()
        let checked = function (index) {
            context.emit('checked', index)
        }
        let sum = computed(() => {
            let a = props.arr.filter(item => {
                return item.flag
            })
            if (props.running) return props.arr.length - a.length
            return a.length
        })
        function deletefn(index) {
            context.emit('delete', index)
        }
        function set(e) {
            e.target.previousElementSibling.style.display = 'block'
            e.target.previousElementSibling.focus()
        }
        function setfn(index, e) {
            context.emit('set', { index, value: e.target.value })
            e.target.style.display = 'none'
        }
        return {
            sum,
            checked,
            deletefn,
            set,
            input,
            setfn,
        }
    }
}
</script>